<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./truepage.css">
		<link rel="stylesheet" href="./font/iconfont.css">
	</head>
	<body>
		<div class="top">
			<div class="top-up">
				<span class="iconfont icon-dianhua font1"></span>
				<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
				<img src="./img/2.png" alt="" class="fendi">
				<div class="top-right">
					<a href="#">FENDI与<span class="person"></span></a>
					<a href="personcenter.html">我的订单</a>
					<span class="iconfont icon-sousuo font2"></span>
					<span class="iconfont icon-nanzhuang font3"></span>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li>女士
						<div class="menu1">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>男士

						<div class="menu2">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					<li>童装
						<div class="menu3">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>婚礼灵感
						<div class="menu4">
							<div class="menu4-dl">
								<dl>
									<dt>她的礼物</dt>
									<dd><img src="./img/5.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Fendi x Chaos</a></dd>
									<dd><a href="#">春夏系列2021</a></dd>
									<dd><a href="#">Fendi Peekaboo</a></dd>
									<dd><a href="#">Fendi Baguette</a></dd>
								</dl>
								<dl>
									<dt>他的礼物</dt>
									<dd><img src="./img/4.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Peekaboo</a></dd>
									<dd><a href="#">Baguette</a></dd>
									<dd><a href="#">单肩包</a></dd>
									<dd><a href="#">手提包</a></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<p>个人中心</p>
		</div>
		<div class="center">
			<div class="center-left">
				<div class="center-left1">
				<h6>填写收货地址</h6>
				<span>姓：</span>
				<span>名：</span>
				<input type="text" id="surname">
				<input type="text" id="name">
				</div>
				<div class="center-left2">
					<p>联系电话</p>
					<input type="text" id="phone">
				</div>
				<div class="center-left3">
					<span>省</span>
					<span>市</span>
					<span>区</span>
					<select name="" id="province"></select>
					<select name="" id="city"></select>
					<select name="" id="area"></select>
				</div>
				<div class="center-left4">
					<p>详细地址</p>
					<input type="text" id="address">
					<input type="radio" id="check"><span>设为默认地址</span>
				</div>
				<div class="center-left5">
					<h6>礼物</h6>
					<input type="radio" id="gift"><span>这是一个礼物</span>
				</div>
				<div class="center-left6">
					<h5>支付方式</h5>
					<img src="./img/p1.png" alt="">
					<img src="./img/p2.png" alt="">
				</div>
			</div>
			<div class="center-right">
				<div class="cart">
					<h5>购物袋</h5>
					<p>您的订单共有<span class="num">1</span>件商品</p>
					<div class="product">
						<div class="product-left">
							<img src="" alt="">
							<i>已加购</i>
						</div>
						<div class="product-right">
							<ol>
								<li>凉鞋</li>
								<li>商品编号：8R7086TC3F0QA0</li>
								<li class="price"></li>
								<li>颜色：<span class="color" style="color: #000000;"></span>尺码：<span class="size" style="color: #000000;"> </span></li>
								<li>数量：1</li>
							</ol>
						</div>
					
					</div>
					<div class="total">
						<ul>
							<li>共<span>1件商品</span><i class="price2"></i></li>
							<li>运费<i>免邮</i></li>
							<li>总计<i class="price3"></i></li>
						</ul>
						<p style="cursor: pointer;">结算</p>
					</div>
					<div class="cart-right">
						<ol>
							<li>免费配送和退货<span>+</span></li>
							<li>我们能帮助你吗<span>+</span></li>
							<li>销售条件<span>+</span></li>
						</ol>
					</div>
				</div>
				
			</div>
		</div>
		<div class="message">
			<p>订阅我们的新闻资讯</p>
			<p>要获得更多个性化内容，包括访问您所在地区的特殊活动和最新消息，请提供一下详细信息</p>
			<p>手机号码*</p>
			<b></b>
		</div>
		<div class="footer">
			<dl>
				<dt>客服关怀</dt>
				<dd>联系我们</dd>
				<dd>常见问题与解答</dd>
				<dd>订单与配送</dd>
				<dd>退货与退款</dd>
				<dd>追踪您的订单</dd>
			</dl>
			<dl>
				<dt>FENDI与我</dt>
				<dd>登录/注册</dd>
			</dl>
			<dl>
				<dt>企业</dt>
				<dd>寻找精品店</dd>
				<dd>Fendi Private Suites</dd>
				<dd>可持续性</dd>
				<dd>供应链透明化</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>关于FENDI</dd>
				<dd>Fendi的历史</dd>
				<dd>量身定做</dd>
				<dd>皮草工坊</dd>
				<dd>家居</dd>
				<dd>Fendi Boutique Hotel</dd>
				<dd>腕表</dd>
			</dl>
			<dl>
				<dt>法律咨询</dt>
				<dd>隐私条款</dd>
				<dd>销售条款与条件</dd>
				<dd>网站使用条款</dd>
				<dd>行为准则</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>
					<span class="iconfont icon-gongzhonghao"></span>
					<span class="iconfont icon-tubiao214"></span>
				</dd>
			</dl>
		</div>
		<div class="finally">
			<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
			<span>@FENDI-保留所有权</span>
			<span>沪ICP备1301824号-1</span>
			<span>沪公网安备31010602001819号</span>
			<span>上海工商</span>
		</div>
		<script src="./jquery.min.js"></script>
		<script src="./citys.js"></script>
		<script>
			//点击设为默认地址时将地址存储到数据库中
			let address="http://127.0.0.1:81"
			//获取localStorage里面的内容
			let goodsid=localStorage.getItem("goodsid");
			// console.log(goodsid)
			//获取购物车中的数据
			let productRight=$(".product-right")
			$.ajax({
				url:`${address}/details`,
				data:{
					id:goodsid
				},
				success(data){
					$(".product").find("img").attr("src",data.img);
					productRight.find(".price").html(data.price);
					productRight.find(".size").html(data.p);
					productRight.find(".color").html(data.color);
					$(".total").find(".price2").html(data.price);
					$(".total").find(".price3").html($(".total").find(".price2").html())
				}
			})
			$("#check").click(function(){
				if($("#surname").val()&&$("#name").val()&&$("#phone").val()&&$("#province").val()&&$("#city").val()&&$("#area").val()&&$("#address").val()){
					// let surname=$("#surname").val();
					// let name=$("#name").val();
					// let phone=$("#phone").val();
					// let city=$("#province").val()+$("#city").val()+$("#area").val();
					// let address=$("#address").val();
					$.ajax({
						url:`${address}/getaddress`,
						data:{
							surname:$("#surname").val(),
							name:$("#name").val(),
							phone:$("#phone").val(),
							city:$("#province").val()+$("#city").val()+$("#area").val(),
							address:$("#address").val()
						},
						success(data){
							if(data=="用户信息添加成功"){
								
								//实现存储功能
								localStorage.setItem("surname",$("#surname").val())
								localStorage.setItem("name",$("#name").val())
								localStorage.setItem("phone",$("#phone").val())
								localStorage.setItem("city",$("#province").val()+$("#city").val()+$("#area").val())
								localStorage.setItem("address",$("#address").val())
								
							}
						}
					})
					
				}
			})
			$(".total p").click(function(){
				if($("#surname").val()&&$("#name").val()&&$("#phone").val()&&$("#province").val()&& $("#city").val()&& $("#area").val()&&$("#address").val()){
				window.location.href=`${address}/paypage.html`;
			}else{
				alert("请填写收货地址")
			}
			})
			//省市区三级联动功能
			let province=$("#province");
			let city=$("#city");
			let area=$("#area");
			// console.log(citys)
			for(let i=0;i<citys.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${citys[i].provinceName}</option>`;
				province.append(option);
			}
			let mallCityList=citys[0].mallCityList;//在省份下找到对应的市
			for(let i=0;i<mallCityList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallCityList[i].cityName}</option>`;
				city.append(option);
			}
			let mallAreaList=citys[0].mallCityList[0].mallAreaList//在市下找到对应的区
			// console.log(mallAreaList)
			for(let i=0;i<mallAreaList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallAreaList[i].areaName}</option>`;
				area.append(option);
			}
			
			//实现点击对应的省份和市区也随之动态改变;
			province.change(function(){
				updataCity.call(this)//先要确定this的正确指向
				updataArea.call(city[0]);//确定刚进入页面时当前的显示
			})
			//实现点击对应的市区随之动态改变
			city.change(function(){
				updataArea.call(this);
			})
			//更新市
			function updataCity(){
				//先把内容清空防止追加
				city.html("");
				 cityList=citys[this.selectedIndex].mallCityList;//通过selectedIndex属性找到当前省份下的所有市
				for(let i=0;i<cityList.length;i++){
					// console.log(cityList[i])
					let option=`<option>${cityList[i].cityName}</option>`;
					city.append(option);
				}
			}
			//更新区
			function updataArea(){
				area.html("");
				arealist=cityList[this.selectedIndex].mallAreaList;
				// console.log(arealist)
				for(let i=0;i<arealist.length;i++){
					let option=`<option>${arealist[i].areaName}</option>`;
					area.append(option);
					}
			}
			
		</script>
	</body>
</html>
